<template>
  <view class="messages-container">
    <!-- 选项卡 -->
    <view class="tab-bar-top">
      <text :class="{'active-tab': currentTab === 'todo'}" @click="currentTab = 'todo'">待办列表</text>
      <text :class="{'active-tab': currentTab === 'done'}" @click="currentTab = 'done'">已办列表</text>
    </view>

    <!-- 待办列表 -->
    <view v-if="currentTab === 'todo'">
      <view v-for="item in todoList" :key="item.id" class="message-item" @click="viewDetail(item)">
        <text class="message-title">{{ item.title }}</text>
      </view>
    </view>

    <!-- 已办列表 -->
    <view v-if="currentTab === 'done'">
      <view v-for="item in doneList" :key="item.id" class="message-item" @click="viewDetail(item)">
        <text class="message-title">{{ item.title }}</text>
      </view>
    </view>
	
	<pveVue/>
  </view>
</template>

<script>
	import pveVue from '../components/pve.vue';
export default {
	components: {
			pveVue
		},
  data() {
    return {
      currentTab: 'todo',
	  activeTab: 'messages', // 默认高亮消息页面
      todoList: [],
      doneList: [],
	  /* todoList: [
	    { id: 1, title: '质检待处理任务 1' },
	    { id: 2, title: '质检待处理任务 2' },
	    { id: 3, title: '质检待处理任务 3' },
	    { id: 4, title: '质检待处理任务 4' },
	    { id: 5, title: '质检待处理任务 5' }
	  ],
	  doneList: [
	    { id: 6, title: '质检已完成任务 1' },
	    { id: 7, title: '质检已完成任务 2' },
	    { id: 8, title: '质检已完成任务 3' },
	    { id: 9, title: '质检已完成任务 4' }
	  ] */
    };
  },
  created(){
	  this.fetchMessages();
  },
  methods: {
   fetchMessages() {
      uni.request({
        url: 'https://api.example.com/messages', // 替换为真实 API 地址
        method: 'GET',
        success: (res) => {
          if (res.statusCode === 200) {
            this.todoList = res.data.todo;
            this.doneList = res.data.done;
          }
        },
        fail: (err) => {
          console.error('数据请求失败', err);
        }
      });
    },
	viewDetail(item) {
		uni.navigateTo({
			url: `/pages/messageDetail/index?id=${item.id}&title=${encodeURIComponent(item.title)}`
		});
	},
	switchTab(url, tab) {
		this.activeTab = tab;
		uni.switchTab({ url });
	}
	},
  /* created() { // ✅ `created()` 放在 `methods` 外
    setTimeout(() => {
      console.log('测试数据已加载');
    }, 1000);
  } */
};
</script>

<style scoped>
.messages-container {
  padding: 20rpx;
}

/* 顶部切换栏 */
.tab-bar-top {
  display: flex;
  justify-content: space-around;
  background-color: #f5f5f5;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
}

.tab-bar-top text {
  font-size: 32rpx;
  padding: 10rpx 20rpx;
  cursor: pointer;
}

.active-tab {
  font-weight: bold;
  color: #007aff;
  border-bottom: 4rpx solid #007aff;
}

/* 消息列表 */
.message-item {
  background-color: #ffffff;
  padding: 30rpx;
  margin-bottom: 10rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
}

.message-title {
  font-size: 30rpx;
  color: #333;
}

/* 底部导航栏 */
.tab-bar {
  height: 100rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid #eeeeee;
  flex-shrink: 0;
  box-shadow: 0 -4rpx 8rpx rgba(0, 0, 0, 0.1);
  position: fixed;
  bottom: 0;
  width: 100%;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: color 0.2s ease;
}

.tab-text {
  font-size: 12px;
  color: #999999;
  margin-top: 8rpx;
}

.active .tab-text {
  color: #4080ff;
}
</style>
